import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      isToggleOn: true,
      homeLink: this.props.homeLink,
    }
  }

  // 挂载
  componentDidMount() {
    // 因为 this.props 和 this.state 可能是异步更新的，你不应该依靠它们的值来计算下一个状态。
    // 因此更新数据的时候有可能没有变化，所有应该用以下方法
    /**
     * @param prevState 接收先前的状态
     * @param props 更新被应用时的状态
     */
    this.setState((prevState, props) => ({
      
    }));

    this.timerId = setInterval(() => {
      this.setState({ date: new Date() })
    }, 1000)
  }

  // 卸载
  componentWillMount() {
    clearInterval(this.timerId)
  }

  // 事件
  getData(e) {
    // 在 React 中不能使用返回 false 的方式阻止默认行为。必须明确的使用 preventDefault。
    e.preventDefault();
    this.setState((prevState) => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
  
  changeHomeLink() {
    // 调用父组件方法，穿值给父组件
    this.props.changeHomeLink(this.state.homeLink)
  }

  // 双向数据绑定
  onHanlderChange(e) {
    this.setState({
      homeLink: e.target.value
    })
  }
  // 主体
  render() {
    return (
      <div className="container-fluid">
        <div className="row">
          <div className="col-xs-1 col-xs-offset-4">
            <div>
              <button className="btn btn-primary" onClick={(e) => this.getData(e)}>点我</button>
              <button className="btn btn-primary offset-1">{this.state.isToggleOn? 'ON' : 'OFF'}</button>
            </div>
            <h5>{this.props.user.remark}</h5>
            <h5>现在是：<button className="btn">{this.state.date.toLocaleTimeString()}</button></h5>
            <div>
              <input value={this.state.homeLink} onChange={(e) => this.onHanlderChange(e)}></input>
              <button className="btn btn-primary" onClick={this.changeHomeLink.bind(this)}>changeHomeLink</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Home.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  homeLink: PropTypes.string,
  changeHomeLink: PropTypes.func,
}

export default Home;
